<template>
  <Container class="horseRacing-list bg-light">
    <Tabs v-model="tab">
      <TabPane label="赛马设置">
        <div class="box">
          <div>
            <p>
              <img src="../../../assets/images/distributor.png" alt="经销商指标设置">
              <span>经销商指标设置</span>
            </p>
            <label @click="onEdit('distributor')">编辑</label>
          </div>
          <div>
            <p>
              <img src="../../../assets/images/salesman.png" alt="业务员指标设置">
              <span>业务员指标设置</span>
            </p>
            <label @click="onEdit('salesman')">编辑</label>
          </div>
          <div>
            <p>
              <img src="../../../assets/images/store.png" alt="门店指标设置">
              <span>门店指标设置</span>
            </p>
            <label @click="onEdit('store')">编辑</label>
          </div>
        </div>
      </TabPane>
    </Tabs>
    <ModelItem
      ref="modelItem"
      :distributor="distributor"
      :salesman="salesman"
      :store="store"
      @complete="getData"/>
  </Container>
</template>
<script>
import ModelItem from './list/ModelItem'
export default {
  name: 'setting/horseRacing/list',
  components: {
    ModelItem
  },
  data() {
    return {
      status: 'pass',
      distributor: [],
      salesman: [],
      store: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    onEdit (type) {
      this.$refs.modelItem.openModal(type)
    },
    getData() {
      this.status = 'loading'
      this.$ajaxGet('/setting/race_config/list').then(data => {
        if (data && data.RACE_CONFIG_DISTRIBUTOR) {
          this.distributor = data.RACE_CONFIG_DISTRIBUTOR
        }
        if (data && data.RACE_CONFIG_SALESMAN) {
          this.salesman = data.RACE_CONFIG_SALESMAN
        }
        if (data && data.RACE_CONFIG_STORE) {
          this.store = data.RACE_CONFIG_STORE
        }
        this.status = 'pass'
        this.backTableTop()
      })
      .catch(() => {
        this.status = 'error'
      })
    }
  }
}
</script>